<template>
  <div class="content-page">
    <div class="content-left-menu">
      <!-- query 参数字符形式 -->
      <!-- <RouterLink class="current-class" v-for="item in menuList" :key="item.id"  :to="`/mulRoutes/content/detail/?id=${item.id}&name=${item.name}&auth=${item.auth}`">{{ item.name }}</RouterLink> -->
      <!-- query 参数对象形式 -->
      <RouterLink class="current-class" v-for="item in menuList" :key="item.id"
        :to="{ path:'/mulRoutes/content/detail/',query:{ id: item.id, name: item.name, auth: item.auth} }">{{ item.name }}
      </RouterLink>
  
      <!-- params 参数字符形式 -->
      <!-- <RouterLink class="current-class" v-for="item in menuList" :key="item.id"  :to="`/mulRoutes/content/detail/${item.id}/${item.name}/${item.auth}`">{{ item.name }}</RouterLink> -->
      <!-- params 参数对象形式 -->
      <!-- <RouterLink class="current-class" v-for="item in menuList" :key="item.id"  
          :to="{ name:'detail',params:{ id: item.id, name: item.name, auth: item.auth} }">{{ item.name }}</RouterLink> -->
    </div>
    <div class="right-main-content-detail">
      <RouterView />
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive } from "vue"

const menuList = reactive([
  {
    id: '001',
    name: '泡沫',
    auth: '邓紫棋'
  },
  {
    id: '002',
    name: '黄昏',
    auth: '周传雄'
  },
  {
    id: '003',
    name: '老鼠爱大米',
    auth: '杨臣刚'
  },
  {
    id: '004',
    name: '逆战',
    auth: '张杰'
  },
  {
    id: '005',
    name: '成都',
    auth: '赵雷'
  }
])

</script>
<style  scoped>
.content-page {
  display: flex;
  margin: 20px;
}

.content-left-menu {
  width: 200px;
}

.right-main-content-detail {
  flex: 1;
  margin-left: 30px;
  border: 1px solid #ccc;
}

.current-class {
  line-height: 30px;
  margin: 3px 0;
  background: #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.current-active {
  color: green;
}
</style>
